import React, { useState, useEffect } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  FlatList
} from 'react-native';
import ShoppingBagCard from '../components/cards/ShoppingBagCard';

function ShoppingBag (props) {
  const { navigation } = props;
  const [shoppingBagList, setShoppingBagList] = useState([
    {
      id: 1,
      img: require('../static/images/143.png'),
      price: 49,
      title: "2019年圆领简约时尚宽",
      num: 1,
      size: 'S'
    }, {
      id: 2,
      img: require('../static/images/143.png'),
      price: 49,
      title: "2019年圆领简约时尚宽松韩版学生T恤",
      num: 1,
      size: 'S'
    },
  ]);
  const onStartShop = () => {
    console.log('开始购物')
    navigation.navigate('ClothingType');
  }
  const RenderEmpty = () => {
    return (
      <View style={styles.empty}>
        <Image source={require("../static/images/Bag_empty.png")} style={styles.emptyImg}></Image>
        <Text style={styles.emptyText}>您的购物袋是空的</Text>
        <TouchableOpacity activeOpacity={0.8} onPress={onStartShop}>
          <Text style={styles.emptyBtn}>开始购物</Text>
        </TouchableOpacity>
      </View>
    )
  }

  const RenderList = () => {
    return (
      <View style={styles.list}>
        <View style={styles.listHead}>
          <View style={styles.listHeadLeft}>
            <Text style={styles.listHeadNum}>{shoppingBagList.length} 商品</Text>
            <Text style={styles.listHeadPrice}>￥{shoppingBagList.length} 总价</Text>
          </View>
          <TouchableOpacity activeOpacity={0.8} onPress={onStartShop}>
            <Text style={styles.listHeadRight}>继续购物</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.listContent}>
          <FlatList
            data={shoppingBagList}
            renderItem={ShoppingBagCard}
            keyExtractor={() => Math.random()}
            showsHorizontalScrollIndicator={false}
          />
        </View>
      </View>
    )
  }

  return (
    <View style={styles.page}>
      {
        shoppingBagList.length ? <RenderList /> :
          <RenderEmpty />
      }
    </View>
  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  empty: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  emptyText: {
    fontSize: 18,
    lineHeight: 27,
    color: '#000',
    marginTop: 23,
    marginBottom: 160
  },
  emptyBtn: {
    width: 240,
    height: 50,
    textAlign: 'center',
    lineHeight: 50,
    backgroundColor: 'rgb(0, 0, 0)',
    borderRadius: 25,
    color: "#FFF",
    fontSize: 18
  },
  list: {
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%',
    flex: 1
  },
  listHead: {
    height: 50,
    borderBottomWidth: 1,
    width: '100%',
    borderBottomColor: 'rgba(0,0,0,0.1)',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    width: 335
  },
  listHeadNum: {
    marginRight: 20
  },
  listHeadLeft: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
  },
  listHeadRight: {
    color: '#409EFF'
  }
})

export default ShoppingBag;